<template>
  <div 
    :id="id" 
  />
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    props:['id','chartdata','title','subtext'],
    data() {
      return {
        chart: null,
      }
    },
    mounted() {
      setTimeout(() => {
        this.draw()
      })
      window.addEventListener('resize', this.resizeChart)
    },
    activated() {
      if (this.chart) {
        this.resizeChart()
      }
    },
    methods: {
      resizeChart() {
        this.chart.resize()
      },
      draw() {
        const { title,id,chartdata,subtext } = this
        const { xAxisdata,truedata,falsedata } = chartdata
        const totaldata = truedata.map((e,i)=>e+falsedata[i])
        this.chart = echarts.init(document.getElementById(id))
        const option = {
          title: {
            text: title? title:'',
            right:'0'
          },
          tooltip: {
            trigger: 'item',
          },
          dataZoom: [{
            show: true,
            height: 18,
            // xAxisIndex: [0],
            bottom: 10,
            start: 0,
            end: 100,
            // handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            // handleSize: '110%',
            // handleStyle:{
            //   color:"#d3dee5",
            // },
            textStyle:{
              color:"#fff"
            },
            // fillerColor: '#dce2eb',
            // borderColor:"#dddddd"
          }],
          legend:{
            show:true,
            data:['实际参赛','报名但未参赛','总人数'],
            right: 10,
            top: 20,
            bottom: 20,
            x:'right',
            type:'scroll',
            orient:'vertical'
          },
          /* grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          }, */
          xAxis: {
            type: 'category',
            data:xAxisdata
            //data: [...new Array(6).fill(undefined).map((e,i)=>`${i+1}天前`).reverse(),'今天']
          },
          yAxis: {
            type: 'value'
          },
          series:[
            {
              name: '实际参赛',
              type: 'bar',
              stack: 'htcp',
              emphasis: {
                focus: 'series'
              },
              data: truedata
            },
            {
              name: '报名但未参赛',
              type: 'bar',
              stack: 'htcp',
              emphasis: {
                focus: 'series'
              },
              data: falsedata,
              
            },
            {
              name:'总人数',
              type:'line',
              smooth:'true',
              data:totaldata
            }
          ]
        }
        this.chart.setOption(option)
      },
    },
    destroyed() {
      window.removeEventListener('resize', this.resizeChart)
    }
  }
</script>
<style lang="scss" scoped>
.main {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
}
</style>